<!DOCTYPE html>
<html>
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width">
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>MTBF报表</title>
	<link rel="stylesheet" type="text/css" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<link rel="stylesheet" href="../css/mui.picker.min.css">
	<style>
		.box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			background-color: #fff;
			height: 50px;
		}
		.box > p {
			padding-left: 5px;
			margin: 0;
			padding: 0;
			width: 35%;
			text-align: right;
		}
		.box select {
			margin: 0;
			padding: 0;
			width: 50%;
			height: 20px;
		}
	</style>
	</head>
	<body>
		
		<ul class="mui-table-view mui-table-view-chevron type_list_spair">
			<li class="mui-table-view-cell detail" tapmode>
				<div class="mui-table mui-navigate-right">
					<div class="mui-table-cell mui-col-xs-4">
						<h5 class="mui-ellipsis">区域：</h5>
					</div>
					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
						 <select id='sel' onchange="selChange()" style="margin-bottom:0; padding:0; width:auto;">
					      <!-- 模板引擎 -->
					     </select>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('beginTime')">
				<div class="mui-table mui-navigate-right">
					<div class="mui-table-cell mui-col-xs-4">
						<h5 class="mui-ellipsis">开始时间：</h5>
					</div>
					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
						<span class="mui-h5" id="startDate">请选择</span>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell detail" tapmode="" onclick="chooseTime('endTime')">
				<div class="mui-table mui-navigate-right">
					<div class="mui-table-cell mui-col-xs-4">
						<h5 class="mui-ellipsis">结束时间：</h5>
					</div>
					<div class="mui-table-cell mui-col-xs-8 mui-text-right">
						<span class="mui-h5" id="endDate">请选择</span>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell" style="padding-right:25px;">
				<button id="btnSearch" tapmode="" onclick="searchResult();" style="float:right">
					统&nbsp;&nbsp;计
				</button>
			</li>
		</ul>
		<div id="container" style="height:360px;margin-top:10px"></div>
		<script type="text/javascript" src="../script/api.js"></script>
		<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/mui.picker.min.js"></script>
		<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../script/highcharts.js"></script>
		<script type="text/javascript" src="../script/highcharts-3d.js"></script>
		<script type="text/template" id="itemslist">
			{{each datas as item i}}
			<option value="{{item.value}}">{{item.name}}</option>
			{{/each}}
		</script>
		<script type="text/javascript">
			var beginTime = '', endTime = '', cRegion = '';
			//定义一个全局颜色数组
			var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1', '#000000', '#560f23'];
			apiready = function() {
				endTime =new Date().Format("yyyy-MM-dd 23:59:59");
				$api.html($api.byId('endDate'), endTime);
				
				var today=new Date();
				var t=today.getTime()-30*1000*60*60*24;
				var monthAgo=new Date(t);

				beginTime = monthAgo.Format("yyyy-MM-dd 00:00:00");
				$api.html($api.byId('startDate'), beginTime);
				
				ajaxrd("queryWorkPlaceList", {}, function(ret, err) {
					//alert(JSON.stringify(ret));
					ret.unshift({"name":"所有","id":0,"value":""});
			        AddData('itemslist','sel', ret);
			        
			    })
				searchResult();
				api.parseTapmode();
			}
			//设置每一个数据点的颜色值
			function SetEveryOnePointColor(chart) {
				//获得第一个序列的所有数据点
				var pointsList = chart.series[0].points;
				//遍历设置每一个数据点颜色
				for (var i = 0; i < pointsList.length; i++) {
					chart.series[0].points[i].update({
						color : {
							linearGradient : {
								x1 : 0,
								y1 : 0,
								x2 : 1,
								y2 : 0
							}, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
							stops : [[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')], [0.5, 'rgb(255, 255, 255)'], [1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]]
						}
					});
				}
			}
			
			function selChange() {
      			cRegion = document.getElementById("sel").value;
        	}

			function searchResult() {
				ajaxrd("queryMTTRByLocation", {
					"startDate" : beginTime,
					"endDate" : endTime,
					"cRegion" : cRegion
				}, function(ret, err) {
					var arr = []
					if(ret && ret.length ==0){
						Toast('无数据！')
					}
					ret.forEach(function(item, index) {
						arr.push({
							name : item.location,
							y : item.errorTimeSpan
						});
					})
					Highcharts.chart('container', {
						chart : {
							type : 'column',
							options3d : {
								enabled : true,
								alpha : 15,
								beta : 15,
								depth : 110
							}
						},
						colors : ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
						title : {
							text : '平均故障维修时间MTTR'
						},
						subtitle : {
							// text: '点击可查看具体的版本数据，数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.'
						},
						xAxis : {
							type : 'category'
						},
						yAxis : {
							title : {
								// text: '总的市场份额'
								text : ''
							}
						},
						legend : {
							enabled : false
						},
						plotOptions : {
							series : {
								borderWidth : 0,
								dataLabels : {
									enabled : true,
									format : '{point.y:.1f}'
								}
							}
						},
						tooltip : {
							headerFormat : '<span style="font-size:11px">{series.name}</span><br>',
							pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b>min<br/>'
						},
						series : [{
							// name: '浏览器品牌',
							name : '',
							colorByPoint : true,
							data : arr
						}]
					}, function(chart) {
						//SetEveryOnePointColor(chart);
					});
				})
			}

			function chooseTime(type) {
				selectCommonYMD(function(data) {
					if (type == 'beginTime') {
						$api.html($api.byId('startDate'), data + ' 00:00:00');
						beginTime = data + ' 00:00:00';
					} else {
						$api.html($api.byId('endDate'), data + ' 23:59:59');
						endTime = data + ' 23:59:59';
					}
				})
			}
		</script>
	</body>
</html>